<template>
	<view class="">
		<view class="page-bg-gray"></view>
		<view class="order-status">
			<view class="status">
				{{ status_text[orderModel.status] }}
			</view>
			<view class="reason" v-if="orderModel.status == 1">
				剩余:<u-count-down :timestamp="countDownSecond"></u-count-down>
			</view>
		</view>
		<view class="address-select-box">
			<view class="address-select-box-main">
				<view class="address-info">
					<view class="address-selected">
						<view class="top">
							<view class="name">{{ addressInfo.addressee }}</view>
							<view class="phone">{{ addressInfo.mobile }}</view>
						</view>
						<view class="bottom">
						{{ getAddressText(addressInfo) }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goods-box">
			<view class="order">
				<view class="top">
					<view class="left">
						<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
						<view class="store">{{ orderModel.store_name }}</view>
					</view>
				</view>
				<view class="item" v-for="(item, sindex) in orderModel.subs" :key="item.id">
					<view class="left"><image :src="photo_base_url + item.goods_cover" mode="aspectFill"></image></view>
					<view class="content">
						<view class="title u-line-2">{{ item.goods_name }}</view>
						<view class="type">{{ item.goods_option_title }}</view>
					</view>
					<view class="right">
						<view class="price">
							￥{{ priceInt(fenZhuanYuan(item.sell_price)) }}
							<text class="decimal">.{{ priceDecimal(fenZhuanYuan(item.sell_price)) }}</text>
						</view>
						<view class="number">x{{ item.total }}</view>
						<u-button shape="circle" size="mini"
						style="margin-top: 40rpx;" @click="gotoAftersale(item)"
						v-if="item.status > 2 && item.refund_status < 99"
						 class="btnCustomStyle">
						 {{ getRefundStatusText(item.refund_status) }}
						 </u-button>
						 <u-button shape="circle" size="mini"
						 style="margin-top: 40rpx;" @click="gotoAftersale(item)"
						 v-if="item.refund_status == 99"
						  class="btnCustomStyle">
						  {{ getRefundStatusText(item.refund_status) }}
						  </u-button>
					</view>
				</view>
				<view class="tips-table" v-for="(tips,tindex) in orderModel.tips_list" :key="tindex">
					<view class="title">{{tips.title}}</view>
					<view class="remark">{{tips.remark}}</view>
					<view class="status">{{tips.status}}</view>
				</view>
			</view>
		</view>
		<u-cell-group :border="false" style="margin-top: 30rpx;">
			<u-cell-item title="订单号" :arrow="false" :border-top="false" :border-bottom="false" hover-class="cell-hover-class">
				<view slot="right-icon" class="">
					<text>{{ orderModel.order_no }}</text>
					<text style="width: 5px;display: inline-block;"></text>
					<u-button shape="circle" size="mini" @click="setClipboardData()">复制</u-button>
				</view>
			</u-cell-item>
			<u-cell-item :title="tl.title" :arrow="false" :border-top="false" :border-bottom="false"
			 v-for="(tl,index) in timeLine" :key="index"
			hover-class="cell-hover-class">
				<view slot="right-icon" class="">
					{{ tl.description }}
				</view>
			</u-cell-item>
			<u-cell-item title="支付方式" :arrow="false" :border-top="false" :border-bottom="false" hover-class="cell-hover-class">
				<view slot="right-icon" class="">
					在线支付
				</view>
			</u-cell-item>
			<u-cell-item title="配送方式" :arrow="false" :border-top="false" :border-bottom="false" hover-class="cell-hover-class">
				<view slot="right-icon" class="">
					普通快递
				</view>
			</u-cell-item>
			<view style="height: 80rpx;line-height: 80rpx;text-align: center;border-top: 1px solid #CCC;">
				<u-icon name="kefu-ermai"></u-icon>
				<text style="width: 5px;display: inline-block;"></text>
				<text>联系客服</text>
			</view>
		</u-cell-group>
		<u-cell-group :border="false" style="margin-top: 30rpx;">
			<u-cell-item title="运费" :arrow="false" :border-top="false" :border-bottom="false" hover-class="cell-hover-class">
				<view slot="right-icon" class="">
					￥ {{ fenZhuanYuan(moreInfo.dispatch_price) }}
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" v-if="moreInfo.coupon > 0">
				<view slot="title" class="">
					优惠券
				</view>
				<view slot="right-icon" class="">
					<view class="coupon-discount">-￥{{fenZhuanYuan(moreInfo.coupon)}}</view>
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" v-if="moreInfo.activity > 0">
				<view slot="title" class="">
					活动优惠
				</view>
				<view slot="right-icon" class="">
					<view class="coupon-discount">-￥{{fenZhuanYuan(moreInfo.activity)}}</view>
				</view>
			</u-cell-item>
			<u-cell-item title="发票" :border-bottom="false">
				<view slot="right-icon" class="">
					{{ moreInfo.invoice < 1 ? '不开发票':'查看发票'  }}
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :border-bottom="false" hover-class="cell-hover-class">
				<view slot="right-icon" class="">
					共{{subsLength}}件 小计:<text class="price">￥{{fenZhuanYuan(orderModel.total_price)}}</text>
				</view>
			</u-cell-item>
		</u-cell-group>
		<view style="height: 120rpx;"></view>
		<view class="footer-btn">
			<view class=""></view>
			<view class="">
				<u-button shape="circle" size="mini" class="btnCustomStyle" 
				v-if="orderModel.status == 1 || orderModel.status == 2" @click="gotoCloseOrder(orderModel.id)">取消订单</u-button>
				<text style="width: 5px;display: inline-block;"></text>
				<u-button shape="circle" size="mini" class="btnCustomStyle" type="error"
				v-if="orderModel.is_show_primary"
				@click="gotoNext(orderModel.id,orderModel.status)"
				>{{getNextStatusText(orderModel.status)}}</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			},
			subsLength(){
				if (!this.orderModel.subs){
					return 0;
				}
				return this.orderModel.subs.length
			}
		},
		data() {
			return {
				queryData: {
					goods_id:0,
					goods_num:0,
					goods_option_id:0,
					cart_ids:[]
				},
				countDownSecond: 0,
				addressInfo: {},
				couponList: [],
				selectCoupons: [],
				freight:0,
				submitBtnLoading: false,
				couponDetails: false,
				next_status_text: {},
				status_text: {},
				refund_status_text: {},
				orderModel: {},
				timeLine: [],
				moreInfo: {},
				photo_base_url: ''
			}
		},
		onLoad() {
			console.log(this.$Route.query)
			this.getData(this.$Route.query)
		},
		methods:{
			fenZhuanYuan(_price){
				return (_price / 100).toFixed(2)
			},
			getNextStatusText(_status){
				if(this.next_status_text[_status]){
					return this.next_status_text[_status]
				} else {
					return '未知'
				}
			},
			// 订单商品总计 - 数量
			goodsTotalNum(){ 
				return 0
				let num = 0;
				this.orderList.map(order => {
					order.goodss.map(item => {
						num += item.buy_num
					})
				})
				return num;
			},
			// 订单商品总计 - 价格
			goodsTotalPrice(xiaoshu = 100){ 
				return 0
				let price = 0;
				this.orderList.map(order => {
					price += this.itemGoodsTotalPrice(order,xiaoshu)
				})
				return (price / xiaoshu).toFixed(2);
			},
			itemGoodsTotalPrice(item,xiaoshu = 100){
				return 0
				let price = 0;
				item.goodss.map(item => {
					price += item.options[0].price * item.buy_num
				})
				price -= item.discount_money
				return (price / xiaoshu).toFixed(2);
			},
			// 应付
			payable(xiaoshu = 100){ 
				return 0
				let totalPrice = this.goodsTotalPrice(1)
				// 要减掉优惠券等等
				return (totalPrice / xiaoshu).toFixed(2);
			},
			// 商店合计
			totalPrice(item) {
				return 0
				let price = 0;
				item.map(val => {
					price += parseFloat(val.options[0].price * val.buy_num);
				});
				return (price / 100).toFixed(2);
			},
			// 商店合计总件数
			totalNum(item) {
				return 1
				let num = 0;
				item.map(val => {
					num += val.buy_num;
				});
				return num;
			},
			getAddressText(e){
				let texts = []
				let xunhuanNames = [
					'province',
					'city',
					'area',
					'street',
				]
				for	(var k in xunhuanNames){
					if('不显示' != e[xunhuanNames[k]]){
						texts.push(e[xunhuanNames[k]])
					}
				}
				return texts.join('-')
			},
			getData(_query){
				this.$api.order.details({id:_query.id}).then(res => {
					console.log(res)
					this.orderModel = res.order
					this.photo_base_url = res.photo_base_url
					this.addressInfo = res.addressInfo
					this.next_status_text = res.next_status_text
					this.status_text = res.status_text
					this.refund_status_text = res.refund_status_text
					this.countDownSecond = res.count_down_second
					this.timeLine = res.more_info.time_line
					this.moreInfo = res.more_info
				})
				.catch(err => {
					console.log(err)
				})
			},
			setClipboardData(){
				uni.setClipboardData({
				    data: this.orderModel.order_no
				});
			},
			gotoAftersale(_sRow){
				uni.$once('refundChange',function(data){
					_sRow.refund_status = data.refund_status
				})
				this.$myRouter.push({name:'member/order_aftersale',params:{
					sid:_sRow.id,
				}})
			},
			gotoCloseOrder(_orderId){
				this.$myRouter.push({name:'member/order_close',params:{id:_orderId}})
			},
			// 根据订单状态跳转下一个功能
			gotoNext(_orderId,_status){
				if(1 == _status){
					this.$myRouter.push({name:'order/pay',params:{id:_orderId}})
				}
			},
			getRefundStatusText(_refund_status){
				if(this.refund_status_text[_refund_status]){
					return this.refund_status_text[_refund_status]
				} else {
					return '未知'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/member_order_list.scss';
	
	.address-select-box{
		// margin-top: 20rpx;
		position: relative;
		padding: 20rpx 20rpx 0 20rpx;
		.address-select-box-main{
			display: flex;
			background-color: #FFF;
			justify-content: space-between;
			border-radius: 20rpx;
		}
		.icon{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-right: 20rpx;
		}
	}
	.address-not{
		padding: 40rpx 40rpx;
		font-size: 36rpx;
		.text{
			margin-left: 10rpx;
		}
	}
	.address-bg-img {
		position: absolute;
		width: 100%;
		height: 8rpx;
		left: 0;
		bottom: 0;
		background: url("") repeat;
	}
	.address-selected {
		padding: 40rpx 40rpx;
		.top {
			display: flex;
			font-weight: bold;
			font-size: 34rpx;
			.phone {
				margin-left: 60rpx;
			}
			.tag {
				display: flex;
				font-weight: normal;
				align-items: center;
				text {
					display: block;
					width: 60rpx;
					height: 34rpx;
					line-height: 34rpx;
					color: #ffffff;
					font-size: 20rpx;
					border-radius: 6rpx;
					text-align: center;
					margin-left: 30rpx;
					background-color:rgb(49, 145, 253);
				}
				.red{
					background-color:red
				}
			}
		}
		.bottom {
			display: flex;
			margin-top: 20rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #999999;
		}
	}
	.goods-box{
		
	}
	.order-create-tabbar-area-bottom{
		height: 120rpx;
	}
	.order-create-tabbar{
		z-index: 100;
		border-top: 1px solid #CCC;
		background-color: #FFF;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		position: fixed;
		padding: 0 30rpx;
		bottom: 0;
		.main{
			position: relative;
			display: flex;
			font-size: 32rpx;
			.right{
				position: absolute;
				top:0;
				right: 0;
			}
			.goods-num{
				color: #000000;
				font-weight: 700;
			}
			.paid-box{
				margin-left: 10rpx;
				position: relative;
				min-width: 50%;
				.info{
					.price{
						font-size: 36rpx;
					}
				}
			}
			.paid-box.discount{
				.info{
					height: 72rpx;
					line-height: 72rpx;
				}
				.btn{
					position: absolute;bottom:0;color: #E41F19;height:60rpx;line-height:60rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	.price{
		color: #E41F19;
		font-weight: 700;
	}
	.coupon-not{}
	.coupon-select{
		color: #333;
	}
	.coupon-discount{
		color: #E41F19;
	}
	.cell-hover-class{
		
	}
	.other-box{
		margin: 20rpx;
		.group{
			border-radius: 20rpx;
			/deep/ .u-cell-item-box{
				border-radius: 20rpx;
			}
		}
	}
	.detailsContent{
		padding: 30rpx;
	}
	
	.discount-price{
		color: #E41F19;
	}
	.order-status{
		width: 100%;
		height: 200rpx;
		background: linear-gradient(90deg,#fe3b0f,#fc603a);
		
		.status{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			color: #FFF;
			font-size: 36rpx;
		}
		.reason{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			color: #FFF;
			font-size: 24rpx;
		}
	}
	.footer-btn{
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		width: 100%;
		height: 100rpx;
		background-color: #FFF;
		border-top: 1px solid #eee;
		align-items: center;
		justify-content: space-between;
		padding: 0 3%;
	}
	.btnCustomStyle{
		padding: 0 40rpx;
	}
</style>